<template>
	<view class="home">
		<swiperVue :data="store.banner"/>
		<detailVue content="紧急通知！十一、十二栋楼明天停水,请做好存水工作!" :url="src"/>
		<tableVue :data="store.table"/>
		<personVue title="便民服务" content="邻里便民服务 全新上线" :url="src1"/>
		<view class="activity">
			<titleVue title="社区活动" flag="true" />
			<activityVue :data="store.activity"/>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import swiperVue from '../../components/swiper.vue';
import detailVue from '../../components/detail.vue';
import tableVue from '../../components/table.vue';
import personVue from '../../components/person.vue';
import titleVue from '../../components/title.vue';
import activityVue from '../../components/activity.vue';
import { useHomeStore } from '../../stores/homeStore';
const store = useHomeStore();
const style = ref({
	backgroundColor: '#ebfbf2'
});
const src=ref("../static/icons/紧急通知.png")
const src1=ref("../static/images/home(1).webp")
onMounted(() => {
	store.getBannerData();
	store.getActivityData();
	store.getTable()
});
</script>

<style lang="scss">
.home {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	background-color: #fff;
	overflow: auto;
	:deep .detail {
		border: 2rpx solid #f2f2f2;
		margin: 40rpx 0;
	}
	:deep .table {
		.item {
			.item_picture {
				border: 2rpx solid #f2f2f2;
			}
		}
	}
	:deep .person {
		background-color: #ebfbf2;
		border-radius: 20rpx;
		.left {
			color: #2ed49f;
		}
	}
	.activity {
		width: 100%;
	}
}
</style>
